<template>
  <div class="console">
    <!--数据卡片-->
    <n-grid cols="1 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item>
        <NCard
          title="教师人数"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="countNumber.teacherNumber" class="text-3xl" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="学生人数"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="countNumber.studentNumber" class="text-3xl" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="课程数量"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="countNumber.courseNumber" class="text-3xl" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="学院数量"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="countNumber.academyNumber" class="text-3xl" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="专业数量"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="countNumber.majorNumber" class="text-3xl" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="班级数量"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="countNumber.claseNumber" class="text-3xl" />
          </div>
        </NCard>
      </n-grid-item>
    </n-grid>

  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { getConsoleInfo } from '@/api/dashboard/console';
  import { CountTo } from '@/components/CountTo/index';


  const loading = ref(true);
  const countNumber = ref<any>({});
  const saleroom = ref<any>({});
  const orderLarge = ref<any>({});
  const volume:any = ref({});



  onMounted(async () => {
    const data = await getConsoleInfo();
    countNumber.value = data.countNumber;
    saleroom.value = data.saleroom;
    orderLarge.value = data.orderLarge;
    volume.value = data.volume;
    loading.value = false;
  });
</script>

<style lang="less" scoped></style>
